<template>
  <div class="Banner_content" name="Banner">
    <div class="Banner_box con_width">
      <!-- 轮播图 -->
      <div class="banner" @mouseenter="stopamnibtn" @mouseleave="openamnibtn">
        <!-- 图片 -->
        <div class="img_sild">
          <router-link to="/comdetail">
            <img
              :class="[bannerID==index?'active_img':'','img']"
              v-for="(item,index) in bannerlist"
              :key="index"
              :src="item"
              alt
            />
          </router-link>
        </div>
        <!-- 左右按钮 -->
        <div class="banner_arrow banner_left" @click="leftbtn">
          <i class="iconfont icon-zuo"></i>
        </div>
        <div class="banner_arrow banner_right" @click="rightbtn">
          <i class="iconfont icon-you"></i>
        </div>
        <!-- 指示点 -->
        <div class="banner_dian">
          <div
            :class="[bannerID==index?'active_dain':'','dian']"
            v-for="(item,index) in bannerlist"
            :key="index"
            @click="dianbtn(index)"
          ></div>
        </div>
      </div>
      
      <!-- 菜单选择 -->
      <div class="BannerMenu">
        <BannerMenu></BannerMenu> 
      </div>

    </div>
  </div>
</template>

<script>
import BannerMenu from "../BannerMenu/BannerMenu.vue"; 
export default {
  name: "Banner",
  data() {
    return {
      bannerID: 0,
      bannerlist: [ 
        "/images/banner/banner1.jpg",
        "/images/banner/banner2.jpg",
        "/images/banner/banner3.jpg"
      ],
       
    };
  },
  //   页面开启时设置定时器
  mounted: function() {
    this.setTime();
  },
  //  页面关闭时清除定时器
  beforeDestroy() {
    this.clearTime();
  },
  methods: {
    //   左按钮
    leftbtn: function() {
      var length = this.bannerlist.length;
      this.bannerID--;
      if (this.bannerID < 0) {
        this.bannerID = length - 1;
      }
    },
    // 右按钮
    rightbtn: function() {
      var length = this.bannerlist.length;
      this.bannerID++;
      if (this.bannerID > length - 1) {
        this.bannerID = 0;
      }
    },
    // 鼠标移上时清除定时器
    stopamnibtn: function() {
      this.clearTime();
    },
    // 鼠标移开时开启定时器
    openamnibtn: function() {
      this.setTime();
    },
    // 指示点
    dianbtn: function(index) {
      this.bannerID = index;
    },
    // 图片自动切换
    // 设置定时器
    setTime: function() {
      var length = this.bannerlist.length;
      this.clearTimeSet = setInterval(() => {
        this.bannerID++;
        if (this.bannerID > length - 1) {
          this.bannerID = 0;
        }
      }, 5000);
    },
    //清除定时器
    clearTime() {
      clearInterval(this.clearTimeSet);
    }
  },
  components: {
    BannerMenu
  }
};
</script>

<style lang="scss" scoped>
@import "./Banner.scss";
</style>